@import "./base.less";

body {
  background: @page-background-color;
}

.h {
  height: @height;
}

.h-l {
  .h();
  line-height: @height;
}

.h-s {
  height: @height-s;
}

.h-l-s {
  .h-s();
  line-height: @height-s;
}

.h-m {
  height: @height-m;
}

.h-l-m {
  .h-m();
  line-height: @height-m;
}

.h-100 {
  height: 100%;
}

.p-h {
  padding-left: @padding;
  padding-right: @padding;
}

.p-v {
  padding-top: @padding;
  padding-bottom: @padding;
}

.p {
  padding: @padding;
}

.p-b{
  padding-bottom: @padding;
}

.p-l {
  padding-left: @padding;
}

.p-r {
  padding-right: @padding;
}

.more {
  background-image: url(../img/ic_arrow_more.png);
  width: 10px;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  float: right;
}

.w-100 {
  width: 100%;
}

.m-r {
  margin-right: @padding;
}

.m-l {
  margin-left: @padding;
}

.m-b {
  margin-bottom: @padding;
}

.m-t {
  margin-top: @padding;
}

.m-v {
  margin-top: @padding;
  margin-bottom: @padding;
}

.b-t(@color:@border-color ) {
  border-top: @color 1px solid;
}

.b-b {
  border-bottom: @border-color 1px solid;
}

.b-r {
  border-right: @border-color 1px solid;
}

.nav-bar {
  position: fixed;
  padding-top: @status-bar-height;
  top: 0;
  width: 100%;
  z-index: 10;
  left: 0;
  height: @nav-bar-height; //ios
  line-height: @nav-bar-height;
  text-align: center;

  &.light {
    background: @light-background-color;
    .b-b();
  }
  & .item {
    display: inline-block;
    padding: 0 5px;
  }

  & .title {
    @page-title-font();
    .item();
  }

  & .subtitle {
    .item();
    @page-subtitle-font();
  }

  & .btn {
    .item();
  }

  .back{
    padding-left: 10px;
    height: 100%;
    width: 44px;
  }

  > .left {
    position: fixed;
    left: 0;
    @page-subtitle-font();
    padding-top: @status-bar-height;
    top: 0;
    height: @nav-bar-height; //ios
    line-height: @nav-bar-height;
    > *:first-child {
      padding-left: @padding;
    }
  }
  > .right {
    position: fixed;
    right: 0;
    @page-subtitle-font();
    padding-top: @status-bar-height;
    top: 0;
    height: @nav-bar-height; //ios
    line-height: @nav-bar-height;
    > *:last-child {
      padding-right: @padding;
    }
  }
}

.tab-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: @tab-bar-height;
  width: 100%;
  .flex();
  .tab {
    .flex-grow(1);
    .flex();
    .justify-content(center);
    .align-items(center);
  }

  .tab-wrap {
    &::after {
      height: calc(~"100% - 20px");
      margin: 10px 0;
      display: block;
      width: 1px;
      content: '';
      background: #f9f9f9;
    }
    .flex-grow(1);
    .flex();

    &:last-child::after {
      display: none;
    }
  }
}

.light {
  .btn:active {
    .active-light(@light-background-color);
  }

  &.btn:active {
    .active-light(@light-background-color);
  }
}

.page {
  margin-top: @nav-bar-height+@status-bar-height;
  margin-bottom: @tab-bar-height+10px;
}

.active-light(@color) {
  background: darken(@color, 5%);
}

.active-dark(@color) {
  background: lighten(@color, 5%);
}
